<template>
  <view class="tp-get-phone">
    <view class="tp-get-phone-title"><text class="tp-get-phone-title-text">申请获取您的手机号码</text></view>
    <view class="tp-get-phone-content">
      <ai-avatar class="tp-get-phone-gzh" :src="gzhImage" size="xxl"></ai-avatar>
      <text class="tp-get-phone-content-text">为了在您中奖时方便联系到您，申请获取您的手机</text>
    </view>
    <view class="tp-get-phone-btn-box">
      <button class="ai-btn ai-btn--lg ai-btn--block ai-btn--primary" open-type="getPhoneNumber" @getphonenumber="mpGetPhoneNumber">授权获取手机号</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'tp-get-phone',
    data() {
      return {
        gzhImage: "https://wx.qlogo.cn/mmhead/mONcle9pic3wYCea896BwKK2RIHIaXxeTqfoFLeLY8KvkUD7H2FGTWb52QYAmwEjqPiadvnTlPSDU/0",
      };
    },
    methods: {
      mpGetPhoneNumber(res) {
        console.log("mpGetPhoneNumber:", res);
        this.$emit("mpGetPhoneNumber", res);
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  @import "@/styles/_button.scss";
  .tp-get-phone {
    background-color: #fff;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;

    padding: 0 80rpx 40rpx 80rpx;

    .tp-get-phone-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;

      .tp-get-phone-title-text {
        font-size: 28rpx;
        color: #666;
      }
    }

    .tp-get-phone-content {
      margin: 40rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .tp-get-phone-gzh {
        padding: 40rpx;
      }

      .tp-get-phone-content-text {
        font-size: $font-size-lg;
        color: var(--gray-2);
      }
    }

    .tp-get-phone-btn-box {
      display: flex;
    }
  }
</style>